<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<div id="content">
	<form class="ym-form ym-columnar linearize-form" id="newBookForm" method="post" enctype="multipart/form-data" action="saveBook">
		<s:fielderror />
		<h6 class="ym-fbox-heading">Text Fields and Simple Select Boxes</h6>
		<div class="ym-grid">
			<div class="ym-g20 ym-gl">
				<div class="ym-fbox ym-fbox-text" id="bookImage">
					<img alt="dummy image" src="images/books/sample/sampleImage.png" class="flexible bordered" id="image" />
				</div>
				<div class="ym-fbox-button">
					<div class="ym-button ym-delete ym-xsmall float-right ym-warning" id="deleteImage" onclick="deleteImage('<s:text name='warningImageText' />');">
						<s:text name="delete" />
					</div>
				</div>
			</div>
			<div class="ym-g80 ym-gr">
				<div class="ym-grid">
					<div class="ym-g100 ym-gl">
						<div class="ym-fbox ym-fbox-text">
							<label for="title" id="labelTitle"><sup class="ym-required">*</sup> <s:text name="title" /></label>
							<s:textfield size="50" id="title" name="title" required="true" />
						</div>						
					</div>
					<div class="ym-g100 ym-gl">
						<div class="ym-fbox ym-fbox-select">
							<label for="authorsSelected" id="labelAuthor"><sup class="ym-required">*</sup> <s:text name="author" /></label>
							<div role="addNew">
								<s:select list="authors" listKey="key" listValue="value" id="authorsSelected" name="authorsSelected" multiple="true" required="true" cssClass="ym-inline" headerKey="" headerValue="" />
							</div>
							<div role="buttonNew">
								<button class="ym-button ym-add ym-small ym-success ym-inline" onclick="addNew('addAuthorAjax', 'authorsSelected');" type="button">
									<s:text name="add" />
								</button>
							</div>
						</div>						
					</div>
				</div>
				<div class="ym-grid">
					<div class="ym-g33 ym-gl">
						<div class="ym-fbox ym-fbox-text">
							<label for="pages"><s:text name="pages" /></label><input type="text" size="8" id="pages" name="newBook.pages">
						</div>
					</div>
					<div class="ym-g33 ym-gl">
						<div class="ym-fbox ym-fbox-text">
							<label for="editionYear"><s:text name="editionYear" /></label> <s:select list="datesList" id="editionYear" name="newBook.editedYear" headerKey="" headerValue=""/>
						</div>
					</div>
					<div class="ym-g33 ym-gr">
						<div class="ym-fbox ym-fbox-text">
							<label for="themed"><s:text name="themed" /></label>
							<s:select list="thems" listKey="key" listValue="value" size="15" id="themed" name="themeSelected" />
						</div>
					</div>
				</div>
				<div class="ym-grid">
					<div class="ym-g33 ym-gl">
						<div class="ym-fbox ym-fbox-text">
							<label for="isbn"><sup class="ym-required">*</sup> <s:text name="isbn" /></label><input type="text" size="15" id="isbn" role="isbn" name="newBook.isbn" required="true" maxlength="13">
						</div>
					</div>
					<div class="ym-g33 ym-gl">
						<div class="ym-fbox ym-fbox-text">
							<label for="lenguage"><s:text name="lenguage" /></label> <s:select list="languageList" listKey="key" listValue="value" cssClass="ym-inline" headerKey="" headerValue="" id="lenguage" name="lenguage"/>
						</div>
					</div>
					<div class="ym-g33 ym-gr">
						<div class="ym-fbox ym-fbox-text">
							<label for="format"><s:text name="format" /></label> <s:select list="formatsList" listKey="key" listValue="value" id="format" name="format" cssClass="ym-inline" headerKey="" headerValue=""/>
						</div>
					</div>
				</div>
				<div class="ym-grid">
					<div class="ym-g50 ym-gl">
						<div class="ym-fbox ym-fbox-select">
							<label for="editorial" role="labelEditorial" id="editorialLabel"><sup class="ym-required">*</sup> <s:text name="editorial" /></label>
							<div role="addNew">
								<s:select list="editorials" id="editorial" name="editorialSelected" listKey="key" listValue="value" cssClass="ym-inline" headerKey="" headerValue="" required="true"/>
							</div>
							<div role="buttonNew">
								<button class="ym-button ym-add ym-small ym-inline ym-success" onclick="addNew('addEditorialAjax', 'editorial');" type="button">
									<s:text name="add" />
								</button>
							</div>
						</div>
					</div>
					<div class="ym-g50 ym-gr">
						<div class="ym-fbox ym-fbox-text">
							<label for="imageUpload"><s:text name="bookImagePath" /></label>
							<s:file id="imageUpload" accept="image/*"></s:file>
							<s:hidden id="imageFile" name="imageFile" />
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="ym-fbox ym-fbox-text">
			<label for="synopsi" id="labelSynopsi"><s:text name="synopsi" /></label>
			<textarea id="synopsi" rows="10" name="newBook.synopsis" draggable="false"></textarea>
		</div>
		<div class="ym-fbox">
			<span class="ym-label" id="locationsLabel"><s:text name="locations" /></span>
			<div class="ym-fbox-wrap">
				<div class="ym-fbox-check">
					<input type="radio" name="location" value="Tortosa" id="location1"> <label for="location1"><s:text name="location1" /></label>
				</div>
				<div class="ym-fbox-check">
					<input type="radio" name="location" value="Lleida" id="location2"> <label for="location2"><s:text name="location2" /></label>
				</div>
				<div class="ym-fbox-check">
					<input type="radio" name="location" value="HDD" id="location3"> <label for="location3"><s:text name="location3" /></label>
				</div>
			</div>
		</div>
		<div class="ym-fbox-footer ym-fbox-button">
			<button id="reset" class="save ym-danger ym-success" type="reset" onclick="return clearForm();">
				<s:text name="erase" />
			</button>
			<button type="button" id="save" class="ym-save ym-success" onclick="validate('newBookForm');">
				<s:text name="save" />
			</button>
		</div>
	</form>
	<div id="dialogAdd" style="display: none"></div>
	<div id="dialogWarning" style="display: none"></div>
	<form id="cloneImageForm" method="post" enctype="multipart/form-data" action="encodeImage">
	   
	</form>
</div>